<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/layui.css">
<script src="layui.js"></script>
<body>
    <div id="test9" class="demo-tree demo-tree-box"></div>
    <form class="layui-form" id="addChildren" action="" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">模块名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">模块对应的路径</label>
            <div class="layui-input-inline">
                <input type="text" name="path" id="path" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权重</label>
            <div class="layui-input-inline">
                <input type="text" name="weight" id="weight" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!--树状图修改操作表单-->
    <form class="layui-form" id="updateChildren" lay-filter="updateform" action="" style="display: none;">
        <div class="layui-form-item">
            <label class="layui-form-label">模块id</label>
            <!--设置为只读-->
            <div class="layui-input-inline">
                <input type="text" name="mId" id="updatemId" readonly="readonly" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">父模块id</label>
            <div class="layui-input-inline">
                <input type="text" name="parentId" id="updateparentId" readonly="readonly" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">模块名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="updatename" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">模块对应的路径</label>
            <div class="layui-input-inline">
                <input type="text" name="path" id="updatepath" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权重</label>
            <div class="layui-input-inline">
                <input type="text" name="weight" id="updateweight" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
    layui.use(['tree', 'util', 'jquery', 'form'], function() {
    var tree = layui.tree,
    layer = layui.layer,
    util = layui.util,
    $ = layui.$,
    form = layui.form

    $.post(
        'http://stuapi.ysdjypt.com/api/GetAllModuleLayUI'
    , {
        token:'99edc960-8dba-43cf-8af8-81c408a2cb6b'
    },
    function(res) {
    //开启节点操作图标
    tree.render({
    elem: '#test1',
    data: res,
    id: 'demoId', //定义索引
    showCheckbox: true,
    edit: ['add', 'update', 'del'] //操作节点的图标
    ,
    click: function(obj) {
    var data = obj.data;
    layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
    },
    customOperate: true //自定义属性
    ,
    operate: function(obj) {
    var type = obj.type; //得到操作类型：add、edit、del
    var data = obj.data; //得到当前节点的数据
    var elem = obj.elem; //得到当前节点元素

    //Ajax 操作
    var id = data.id; //得到节点索引
    if (type === 'add') { //增加节点
        layer.open({
            type: 1,
            title: "添加子节点",
            area: ['500px', '500px'],
            content: $('#addChildren') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
        form.on('submit(formDemo)', function(data) {
            $.post(
                'http://stuapi.ysdjypt.com/api/CreateModule'
                , {
                    name: $('#name').val(),
                    parentId: '4',
                    path: $('#path').val(),
                    weight: $('#weight').val(),
                    token:'99edc960-8dba-43cf-8af8-81c408a2cb6b'
                },
                function(res) {
                    layer.msg(res);

                }
            )
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    } else if (type === 'update') { //修改节点
        form.val('updateform', data);
        layer.open({
            type: 1,
            title: "修改子节点",
            area: ['500px', '500px'],
            content: $('#updateChildren') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
        form.on('submit(formDemo)', function(data) {
            $.post(
                'http://stuapi.ysdjypt.com/api/UpdateModule', {
                    mId: $('#updatemId').val(),
                    parentId: $('#updateparentId').val(),
                    name: $('#name').val(),
                    path: $('#path').val(),
                    weight: $('#weight').val(),
                    token:'99edc960-8dba-43cf-8af8-81c408a2cb6b'
                },
                function(res) {
                    layer.msg(res);

                }
            )
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    } else if (type === 'del') { //删除节点
        $.post(
            'http://stuapi.ysdjypt.com/api/DeleteModule', {
                mId: data.id,
                token:'99edc960-8dba-43cf-8af8-81c408a2cb6b'
            },
            function(res) {
                layer.msg("成功删除" + id);
            }
        )
    }   
}
    });
    console.log(res);
}, "json"
)

    //按钮事件
    util.event('lay-demo', {
        getChecked: function(othis) {
            var checkedData = tree.getChecked('demoId'); //获取选中节点的数据

            layer.alert("测试")

        },
        setChecked: function() {
            tree.setChecked('demoId', [12, 16]); //勾选指定节点
        },
        reload: function() {
            //重载实例
            tree.reload('demoId', {

            });

        }
    });

});
    </script>
    <script>
var globalData = {
    server: "http://stuapi.ysdjypt.com/api/",
    pre: "http://127.0.0.1:8020/权限管理系统/",
    myToken: "1bd92d74-f39f-4dfb-9890-992b38bfd5a3",
    setUserInfo: function(uid, uname, roleNames) {
        sessionStorage.setItem("uid", uid);
        sessionStorage.setItem("uname", uname);
        sessionStorage.setItem("roleNames", roleNames);
    },
    getCurUid: function() {
        return sessionStorage.getItem("uid");
    },
    getCurUName: function() {
        return sessionStorage.getItem("uname");
    },
    getCurRoleNames: function() {
        var rs = sessionStorage.getItem("roleNames");
        if (rs != null) {
            var arr = rs.split(",");
            var data = "[";
            for (var i = 0; i < arr.length; i++) {
                arr[i] = "\'" + arr[i] + "\'";
            }
            return eval("[" + arr.join() + "]");
        }
    }
};
    </script>
</body>

</html>